<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-getElementByld获取元素.html</title>
</head>
<body>
    <div id="time">2019-2-2</div>
    <ul>
        <li>11212123</li>
        <li>21212123</li>
        <li>31212123</li>
        <li>41212123</li>
        <li>51212123</li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
    <div class="box">盒子</div>
    <div class="box">盒子1</div>
    <script>
        //1.因为文档页面从上往下加载,所以先得有标签,所以script要写到标签下面
        //有办法提到前面,后面讲
        //2.注意大小写
        //3.返回的是一个对象
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        //4.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);

        // document.getElementsByTagName() 获取某些元素
        //1.返回的是 获取过来元素对象的集合,以伪数组的形式储存
        //就算只有一个也是伪数组
        //若是找不到,则返回一个空的伪数组
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log(lis[0]);
        //2.可以采用遍历的方式依次打印里面的元素对象
        //3.得到的元素对象是动态的,当目标元素发生改变时,得到的元素也会改变

        //根据标签名获取
        //可以获得某个元素(父元素)内部所有指定标签名的子元素
        //element.getElementsByTagName('标签名')
        //返回的是 获取过来元素对象的集合,以伪数组的形式储存
        //就算只有一个也是伪数组
        //若是找不到,则返回一个空的伪数组

        //先获取ol
        var ol = document.getElementsByTagName('ol');
        //再获取ol下的li元素
        console.log(ol[0].getElementsByTagName('li'));

        //H5 新增的获取元素方式 
        // 1. document.getElementsByClassName() 通过class名字获取
        //返回的是 获取过来元素对象的集合,以伪数组的形式储存
        //就算只有一个也是伪数组
        //若是找不到,则返回一个空的伪数组
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);

        //2.document.querySelector('选择器') 返回指定选择器的第一个元素对象
        //根据class选
        var firstBox = document.querySelector('.box');//注意这里的写法
        console.log(firstBox);
        //根据id选
        var times = document.querySelector('#time');//注意这里的写法
        console.log(times);
        //根据标签选
        var lier = document.querySelector('li');//注意这里的写法
        console.log(lier);
        //上面的只能根据选择器选择第一个
        // document.querySelectorAll() 可以根据选择器选择所有符合的对象
        //返回值是个对象集合(数组)

        //获取body标签
        var bodyele = document.body;
        console.log(bodyele);
        //获取html标签
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>
</body>
</html>
